<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
	<link href="/loading/loading.css" rel="stylesheet">
	<link href="/confirm/jquery-confirm.css" rel="stylesheet">
	<style type="text/css">
		body{
			padding:0px;
			margin:0px;
		}
		.wrapper{
			display: flex;
			width:100%;
		}
		.menu{
			width:200px;
			background:#4747d8;
		}
		.menu ul{
			padding:0;
			margin:0;
		}
		.menu ul li{
			list-style: none;
			padding:10px 20px;
			color:#ffffff;
			font-weight: bold;
			cursor: pointer;
		}
		.menu ul li a{
			display:inline-block;
			width:100%;
			height:100%;
			text-decoration: none;
			color:#ffffff;
		}
		.content{
			flex: 1;
			padding:10px;
		}
		.content input[class=form-control]{
			width:20%;
			display:inline-block;
		}
		.content .search{
			border:1px #e8e8e8 solid;
			padding: 10px;
			box-shaow:2px 2px 5px #e8e8e8;
		}
		.section{
			display:inline-block;
		}
		.section select{
			display:inline-block;
			width:30%;
			line-height:30px;
			border-radius:4px;
		}
	</style>
</head>
<body>
	<div class="container-fluid">
		<div class="row" style="height:10vh;background:#7474ec">
			<div class="col-md-12">
			</div>
		</div>
		<div class="row" style="height:90vh">
			<div class="wrapper" style="height:90vh">
				<div class="menu">
					<ul>
						<li th:each="menu : ${session.menus}">
							<a th:href="${menu.menuUrl}"><span th:text="${menu.menuName}"></span></a>
						</li>
					</ul>
				</div>
				<div class="content" style="position: relative;">
					<div class="search">
						<label for="userName">用户名：</label>
				    	<input type="text" class="form-control" name="userName" id="userName" placeholder="输入用户名">
						<label for="section">地区：</label>
						<div id="section" class="section">
						  <select id="province" class="form-control" ></select>
						  <select id="city" class="form-control"></select>
						  <select id="county" class="form-control"></select>
						</div>
						<input class="btn btn-default" type="button" onclick="search()" value="查询">&nbsp;&nbsp;
						<input class="btn btn-default" type="button" onclick="add()" value="新增">
					</div>
					<div id="list"></div>
					<div id="loading" class="div-a" style="display:none">  
				         <div class="img-div">  
				             <img class="Rotation img" width="500" height="500" /><span class="loading">加载中...</span>  
				         </div>  
				     </div>
				</div>
			</div>
		</div>
	</div>
	
	<div id="adminModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
	  <div class="modal-dialog modal-lg" role="document">
	    <div class="modal-content" style="padding:20px">
	  	  <div class="modal-head">新增站长</div>
	      <div>
	      	<form class="form-horizontal">
			  <div class="form-group">
			  	<label for="account" class="col-sm-2 control-label">账号：</label>
			    <div class="col-sm-10">
			    	<input id="account" class="form-control" placeholder="账号">
			    </div>
			  </div>
			  <div class="form-group">
			  	<label for="password" class="col-sm-2 control-label">密码：</label>
			    <div class="col-sm-10">
			      <input id="password" class="form-control" type="password" placeholder="密码">
			    </div>
			  </div>
			  <div class="form-group">
			  	<label for="name1" class="col-sm-2 control-label">姓名：</label>
			    <div class="col-sm-10">
			      <input id="name1" class="form-control" placeholder="姓名">
			    </div>
			  </div>
			  <div class="form-group">
			  	<label for="phone" class="col-sm-2 control-label">手机号：</label>
			    <div class="col-sm-10">
			      <input id="phone" class="form-control" type="text" placeholder="手机号">
			    </div>
			  </div>
			  <div class="form-group">
			  	<label for="remark" class="col-sm-2 control-label">备注：</label>
			    <div class="col-sm-10">
			      <input id="remark" class="form-control" placeholder="备注">
			    </div>
			  </div>
			  <div class="form-group">
			  	<label for="section1" class="col-sm-2 control-label">地区：</label>
			    <div class="col-sm-10">
			      <div id="section1" class="section">
					  <select id="province1" class="form-control"></select>
					  <select id="city1" class="form-control"></select>
					  <select id="county1" class="form-control"></select>
					</div>
			    </div>
			  </div>
			  <div class="form-group" >
			  	<button style="margin-left:200px" class="btn btn-default col-sm-2" onclick="save()">保存</button>
			  	<button style="margin-left:200px" class="btn btn-default col-sm-2" onclick="return close();">关闭</button>
			  </div>
			</form>
	      </div>
	    </div>
	  </div>
	</div>
	
	<div id="updateModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
	  <div class="modal-dialog modal-lg" role="document">
	    <div class="modal-content" style="padding:20px">
	  	  <div class="modal-head">站长</div>
	      <div>
	      	<form class="form-horizontal">
			  <div class="form-group">
			  	<input type="hidden" id="id"/>
			  	<label for="password2" class="col-sm-2 control-label">新密码：</label>
			    <div class="col-sm-10">
			      <input id="password2" class="form-control" type="password" placeholder="新密码">
			    </div>
			  </div>
			  <div class="form-group" >
			  	<button style="margin-left:200px" class="btn btn-default col-sm-2" onclick="update()">保存</button>
			  </div>
			</form>
	      </div>
	    </div>
	  </div>
	</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/province/distpicker.data.min.js"></script>
<script type="text/javascript" src="/province/distpicker.min.js"></script>
<script type="text/javascript" src="/confirm/jquery-confirm.js"></script>
<script type="text/javascript" src="/confirm/jquery.sticky.min.js"></script>
<script type="text/javascript">
var pageNum = 1;
function posts(size, num){
	pageNum = num;
	var data = {
		name: $('#userName').val(),
		province: $('#province').val(),
		city: $('#city').val(),
		county: $('#county').val(),
		pageSize: size,
		pageNum: num
	}
	$('#loading').show();
	$.ajax({
		url:'/master/list',
		data:data,
		type:'post',
		success: function(html){
			$('#list').html(html);
			$('#loading').hide();
		}
	})
}
function search(){
	posts(20,1);
}
function prePage(pageNum,total){
	var p = pageNum - 1;
	if(p < 1){
		return false;
	}
	posts(20,p);
	
}
function nextPage(pageNum,total){
	var read = pageNum * 20;
	if(read >= total){
		return false;
	}
	var p = pageNum + 1;
	posts(20,p);
}
function add(){
	$('#adminModal').modal();
}
function save(){
	var account = $('#account').val();
	var password = $('#password').val();
	var name = $('#name1').val();
	var phone = $('#phone').val();
	var province = $('#province1').val();
	var city = $('#city1').val();
	var county = $('#county1').val();
	var remark = $('#remark').val();
	if(account === ''){
		alert('账号不能为空');
		return false;
	}
	if(password === ''){
		alert('密码不能为空');
		return false;
	}
	if(name === ''){
		alert('姓名不能为空');
		return false;
	}
	if(phone === ''){
		alert('手机号不能为空');
		return false;
	}
	$.ajax({
		url:'/master/save',
		data:{
			roleId: 2,
			adminAccount: account,
			adminPassword: password,
			adminName: name,
			adminPhone: phone,
			adminProvince: province,
			adminCity: city,
			adminCounty: county,
			adminRemark: remark
		},
		type:'post',
		success: function(res){
			if(res !== 'success'){
				alert('新增失败，请重试！');
				return false;
			}
			if(res === 'fail'){
				alert('账号或手机号重复！');
				return false;
			}
			$('#adminModal').modal('hide');
			posts(20, pageNum);
		}
	}) 
}
function close(){
	$('#adminModal').modal('hide');
	return false;
}
function updateUser(id){
	$('#updateModal').modal();
	$('#id').val(id);
}
function update(){
	var id = $('#id').val();
	var pass = $('#password2').val();
	if(pass === ''){
		alert('请输入密码');
		return false;
	}
	$.ajax({
		url:'/admin/update',
		data:{
			id: id,
			adminPassword: pass
		},
		type:'post',
		success: function(res){
			if(res !== 'success'){
				alert('删除失败，请重试！');
				return false;
			}
			$('#updateModal').modal('hide');
		}
	}) 
}
function delUser(id){
	$.confirm({
		title: '删除类型',
	    content: '确认删除吗？',
	    confirmButton: '确定',
	    cancelButton: '取消',
	    confirm: function(){
	    	$.ajax({
	    		url:'/master/update',
	    		data:{
	    			id: id,
	    			adminState: 0
	    		},
	    		type:'post',
	    		success: function(res){
	    			if(res !== 'success'){
	    				alert('删除失败，请重试！');
	    				return false;
	    			}
	    			posts(20, pageNum);
	    		}
	    	}) 
	    },
	    cancel: function(){
	    }
	});
}
$(function(){
	$('#section').distpicker({
		autoSelect: false
	});
	$('#section1').distpicker({
		autoSelect: false
	});
	posts(20,1);
})
</script>
